<template>
	<div class="loginForm">
		<div class="form">
			<div class="form-title">野人体育赛事系统管理后台</div>
			<el-form
				ref="loginForm"
				key="1"
				:model="loginForm"
				:rules="loginRules"
				class="login-form"
				label-position="top"
			>
				<div class="tabs">
					<div
						v-if="loginForm.type == 'code'"
						class="tabs-item"
						:class="loginForm.type == 'code' ? 'tabs-itemSelect' : ''"
						@click="loginTypeChange('code')"
					>
						<div>验证码登录</div>
					</div>
					<div
						v-else
						class="tabs-item"
						:class="loginForm.type == 'pwd' ? 'tabs-itemSelect' : ''"
						@click="loginTypeChange('pwd')"
					>
						<div>密码登录</div>
					</div>
				</div>
				<el-form-item v-if="loginForm.type == 'code'" label="验证码" prop="code">
					<el-form-item label="手机号" prop="userphone">
						<el-input
							ref="userphone"
							v-model="loginForm.userphone"
							class="input"
							placeholder="请输入"
							clearable
							maxlength="11"
							name="userphone"
							type="text"
							tabindex="1"
						/>
					</el-form-item>
					<el-input
						ref="code"
						v-model="loginForm.code"
						class="input"
						placeholder="请输入"
						name="code"
						clearable
						type="text"
						tabindex="1"
						maxlength="6"
					>
						<el-link
							slot="append"
							type="primary"
							class="show-pwd"
							:underline="false"
							:disabled="timeTxt == '获取验证码' ? false : true"
							@click="getNumCode"
						>
							{{ timeTxt }}
						</el-link>
					</el-input>
				</el-form-item>
				<template v-else>
					<el-form-item label="用户名" prop="user_name">
						<el-input
							ref="user_name"
							v-model="loginForm.user_name"
							class="input"
							placeholder="请输入"
							clearable
							type="text"
							tabindex="1"
						/>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input
							ref="password"
							v-model="loginForm.password"
							class="input"
							placeholder="请输入"
							clearable
							name="password"
							show-password
							tabindex="1"
							maxlength="20"
						/>
					</el-form-item>
				</template>
				<el-button
					style="width: 100%"
					:loading="loading"
					type="primary"
					class="login-btn"
					@click.native.prevent="handleLogin"
				>
					登录
				</el-button>
			</el-form>

			<div class="agreement">
				<el-checkbox v-model="checked" />
				<div class="agreement-content">
					登录即同意本系统
					<span class="agreement-content-row" @click="privacyShow">《法律声明和隐私保护协议》</span>
				</div>
			</div>
		</div>
		<privacy ref="refPrivacy" />
	</div>
</template>

<script>
	import { forgetPasswordApi, sendMsg } from '@/api/user'
	import Privacy from './privacy.vue'
	export default {
		name: 'login',
		components: {
			Privacy
		},
		data() {
			const valiuserphone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入手机号码'))
				} else if (!/^1[0123456789]\d{9}$/.test(value)) {
					return callback(new Error('手机号码格式有误'))
				} else {
					callback()
				}
			}
			return {
				checked: false,
				picUrl: '',
				loginForm: {
					type: 'pwd',
					user_name: '',
					userphone: '',
					code: '',
					password: ''
				},
				loginRules: {
					userphone: [{ required: true, validator: valiuserphone, trigger: 'blur' }],
					password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
					code: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
					user_name: [{ required: true, trigger: 'blur', message: '请输入用户名' }]
				},
				passwordType: 'password',
				capsTooltip: false,
				loading: false,
				redirect: undefined,
				otherQuery: {},
				passShow: false,
				timeNum: 0, // 验证码
				disabled: false,
				timeTxt: '获取验证码'
			}
		},
		watch: {
			$route: {
				handler: function (route) {
					const query = route.query
					if (query) {
						this.redirect = query.redirect
						this.otherQuery = this.getOtherQuery(query)
					}
				},
				immediate: true
			}
		},
		mounted() {
			if (this.loginForm.type == 'code' && this.loginForm.userphone === '') {
				this.$refs.userphone.focus()
			} else if (this.loginForm.type == 'pwd' && this.loginForm.user_name === '') {
				this.$refs.user_name.focus()
			}
		},
		methods: {
			privacyShow() {
				this.$refs.refPrivacy.init()
			},
			getNumCode() {
				var time = 59
				const _this = this
				this.$refs.loginForm.validateField('userphone', userphoneError => {
					if (userphoneError) {
						return false
					} else {
						clearInterval(set)
						var set = setInterval(function () {
							_this.$set(_this, 'timeTxt', `${time}秒后重试`)
							time--
							if (time == 0) {
								_this.timeTxt = '获取验证码'
								clearInterval(set)
							}
						}, 1000)

						sendMsg({
							mobile: this.loginForm.userphone
						}).then(res => {})
					}
				})
			},
			loginTypeChange(type) {
				this.loginForm.type = type
			},
			changePass() {
				this.form = {}
				this.passShow = true
			},
			handleLogin() {
				const _this = this
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						if (!this.checked) {
							this.$message.warning('请阅读并选中【法律声明和隐私保护协议】')
							return
						}
						_this.loading = true
						_this.$store
							.dispatch('user/login', {
								user_name: _this.loginForm.user_name,
								pass_word: _this.loginForm.password
							})
							.then(res => {
								_this.loading = false
								if (res.first_login == '1') {
									_this.$store.dispatch('user/logout').then(result => {
										_this.$emit('changeType', '2', {
											userphone: _this.loginForm.userphone,
											token: res.token
										})
									})
								} else {
									_this.$router.push({
										path: '/',
										query: _this.otherQuery
									})
								}
							})
							.catch(() => {
								_this.loading = false
							})
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			submit() {
				this.$refs.oneForm.validate(valid => {
					if (valid) {
						this.form.event = 'save'
						forgetPasswordApi(this.form).then(res => {
							if (res) {
								this.$message({
									message: '修改成功!',
									type: 'success'
								})
								this.passShow = false
							}
						})
					}
				})
			},
			getOtherQuery(query) {
				return Object.keys(query).reduce((acc, cur) => {
					if (cur !== 'redirect') {
						acc[cur] = query[cur]
					}
					return acc
				}, {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginForm {
		.form {
			width: 360px;

			&-title {
				font-weight: 600;
				font-size: 24px;
				padding-bottom: 30px;
			}

			.tabs {
				display: flex;
				font-size: 18px;
				margin-bottom: 20px;

				&-item {
					margin-right: 40px;
					height: 30px;
					position: relative;
					cursor: pointer;
				}

				&-itemSelect {
					font-weight: 600;
				}

				.tabs-itemSelect::after {
					content: '';
					position: absolute;
					display: block;
					height: 2px;
					background: #37a6e5;
					width: 30px;
					bottom: 0;
					left: calc(50% - 15px);
				}
			}
		}

		.agreement {
			display: flex;
			padding-top: 20px;

			&-content {
				font-size: 14px;
				padding-left: 8px;

				&-row {
					color: #37a6e5;
					cursor: pointer;
				}
			}
		}
	}
</style>
